<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="incloude/common::common_header(~{::meta},~{::link})"></head>
<head>
    <title>上级菜单选择</title>
    <link rel="stylesheet" type="text/css" th:href="@{~/plugins/ztree/css/metroStyle/metroStyle.css}" media="all">
</head>
<body>

<div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">

                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">

                                    <div>
                                        <ul id="tree" class="ztree"></ul>
                                    </div>


                                    <div class="layui-form-item layui-layout-admin">
                                        <div class="layui-input-block">
                                            <div class="layui-footer" style="left: 0;">
                                                <button class="layui-btn" data-type="submit">确定</button>
                                                <button class="layui-btn layui-btn-primary" data-type="close">关闭</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="incloude/common::common_js"></div>
<div th:replace="incloude/common::layui_config"></div>
<script th:src="@{~/plugins/ztree/js/jquery.ztree.all.min.js}"></script>
<script th:inline="javascript">
    layui.use(['layer'], function(){
        const layer = layui.layer
        ,index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        const $ = layui.$, active = {
            submit: function(){
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                var nodes = treeObj.getSelectedNodes(true)[0];
                parent.layui.$('#selected-menu-name').val(nodes.name);
                parent.layui.$('#selected-menu-id').val(nodes.id);
                parent.layer.close(index);
            },
            close: function(){
                parent.layer.close(index);
            }
        };

        $('.layui-btn').on('click', function(){
            var othis = $(this),type = othis.data('type');
            active[type] && active[type].call(this);
        });
    });

    const setting = {
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid"
            }
        }
    };
    /*后台返回数据*/
    const zNodes =[[${list}]];
    for (let i = 0; i < zNodes.length; i++) {
        zNodes[i].icon = null;
    }
    /*初始化zTree*/
    $(document).ready(function(){
        var treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
        treeObj.expandAll(true);//默认展开所有
    });


</script>

</body>
</html>